﻿<%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Article.aspx.cs" Inherits="Hosting.Article" %>

<%@ Register TagPrefix="oajax" Namespace="OboutInc" Assembly="obout_AJAXPage" %> 

<%@ Register Assembly="obout_Interface" Namespace="Obout.Interface" TagPrefix="obout" %>

<%@ Register Assembly="obout_Window_NET" Namespace="OboutInc.Window" TagPrefix="owd" %>

<%@ Register Assembly="obout_SuperForm" Namespace="Obout.SuperForm" TagPrefix="obout" %>

<%@ Register Assembly="obout_Grid_NET" TagPrefix="obout" Namespace="Obout.Grid" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel ID="udp1" runat="server">
<ContentTemplate>

<select id="sArticleGroup" runat="server" datasourceid="dsColors" datatextfield="AGName" datavaluefield="AGId">
</select>

<div style="position: relative; z-index: 0;">
<%--Article--%>
<obout:Grid DetailGrid id="dgArticles" runat="server" AutoGenerateColumns="false" DataSourceID="ldsArticles" AllowColumnResizing="false"
         AllowRecordSelection="false" AllowFiltering="true" CallbackMode="true" Serialize="false" FilterType="ProgrammaticOnly"
         OnInsertCommand="dgArticles_InsertCommand"
         OnUpdateCommand="dgArticles_UpdateCommand"
         OnDeleteCommand="dgArticles_DeleteCommand"
         PageSizeOptions="5,10,20,50" AllowManualPaging="True" AllowMultiRecordSelection="False">

    <ScrollingSettings ScrollWidth="850px" />
    <ClientSideEvents OnBeforeClientEdit="dgArticles_ClientEdit" OnBeforeClientAdd="dgArticles_ClientAdd" 
    OnClientPopulateControls="onPopulateControls" OnBeforeClientDelete="dgArticles_BeforeClientDelete" ExposeSender="true" />

    <Columns>
        <obout:Column DataField="AGId" HeaderText="GroupID" Visible="False" />
        <obout:Column DataField="AContent" HeaderText="Content" Visible="False" />
        <obout:Column DataField="AId" HeaderText="ID" ReadOnly="true" Width="50px" />
        <obout:Column DataField="AName" HeaderText="Title" Width="250px" />
        <obout:Column DataField="UserName" HeaderText="Author" Width="200px" />
        <obout:Column DataField="AActive" HeaderText="Active" />
        <obout:Column  AllowEdit="true" AllowDelete="true" AllowSorting="false" />
    </Columns>

</obout:Grid>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="udp1">
        <ProgressTemplate>
			<div class="loading-image">
				<img src="../img/loaderWhite.gif" alt="Not image">
			</div>
        </ProgressTemplate>
    </asp:UpdateProgress>
    </div>
</ContentTemplate>
</asp:UpdatePanel>

<owd:Window ID="Window1" runat="server" IsModal="true" ShowCloseButton="true" Status="" StyleFolder="img/blue"
        MinHeight="680" MinWidth="1000" VisibleOnLoad="false" Top="0" 
        Title="Add/Edit Record">

    <input type="hidden" id="AId" runat="server" />
    <input type="hidden" id="UserName" runat="server" />

<div class="super-form">
<obout:SuperForm ID="sfGroupDetail Width="525" DefaultMode="Insert"
    AutoGenerateRows="false" DataKeyNames="AGId">
    
    <Fields>
        <obout:TemplateField>
            <ItemTemplate>
                <fieldset>
                <p>
                    <a href="#" id="anchorNotification"></a>
                    <div class="notification information png_bg" id="divBigNotification" style="display:none" >
	                    <div id="divNotification">
                            <label id="NotificationLabel">Update status of control.</label>
	                    </div>
                    </div>
                </p>
                <p>
                    <label>Choose Article Group:</label>
                    <select name="dropdown" id="sAGroup" class="small-input" runat="server">
                    </select>
                </p>
                <p>
                    <label for="AName">Title:</label><br />
                    <input class="text-input medium-input" type="text" id="AName" runat="server" />
                </p>
                <p>
                <label for="AActive">Active:</label><br />
                    <input type="checkbox" id="AActive" runat="server" />
                </p>
                <p>
                    <label for="AContent">Content:</label><br />
                    <%--<obout:Editor ID="AContent" runat="server" Height="300px" Width="100%"></obout:Editor>--%>
                    <%--<asp:Editor ID="AContent" Width="880px" runat="server" Height="100px" />--%>
                    <textarea cols="100" id="editor1" name="editor1" rows="10">
                        
                    </textarea>
                    <script>
                        // Replace the <textarea id="editor1"> with an CKEditor instance.
                        CKEDITOR.replace('editor1', {
                            on: {
                                focus: onFocus,
                                blur: onBlur,

                                // Check for availability of corresponding plugins.
                                pluginsLoaded: function (evt) {
                                    var doc = CKEDITOR.document, ed = evt.editor;
                                    if (!ed.getCommand('bold'))
                                        doc.getById('exec-bold').hide();
                                    if (!ed.getCommand('link'))
                                        doc.getById('exec-link').hide();
                                }
                            }
                        });
                    </script>
                    <p id="eMessage"></p>
                </p>                
                <p>
                    <a href="#divBigNotification">
                        <input id="Button1" type="button" class="button" value="Save Change" runat="server" onclick="saveChanges(); return false;" />
                    </a>
                    <input id="Button2" type="button" class="button" value="Cancel" runat="server" onclick="cancelChanges(); return false;" />
                </p>
                </fieldset>
                
            </ItemTemplate>
        </obout:TemplateField>
    </Fields>
</obout:SuperForm>

</div>

</owd:Window>

<asp:LinqDataSource EnableInsert="true" EnableDelete="true" EnableUpdate="true" ID="ldsArticles"
    ContextTypeName="Hosting.Class.HostingDomainWebsiteDataContext"
    TableName="TBL_Articles" runat="server">
</asp:LinqDataSource>

<asp:LinqDataSource ID="dsColors" runat="server" 
    ContextTypeName="Hosting.Class.HostingDomainWebsiteDataContext" 
    OrderBy="AGId,AGName" 
    Select="new (Key.AGId,Key.AGName)"
    TableName="TBL_ArticleGroups"
    GroupBy="new(AGId,AGName)">
</asp:LinqDataSource>

</asp:Content>

<asp:Content ID="Content2" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="js/MessageValid.js"></script>    <%--Show Message--%>
<script type="text/javascript" src="js/Article.js"></script>
<script type="text/javascript" src="js/ArticleGroup.js"></script>
<script type="text/javascript" src="js/GridMessageValid.js"></script>
<script type="text/javascript" src="js/ckeditor.js"></script>
<script src="js/ProcessCKEditor.js" type="text/javascript"></script>

<style type="text/css">
        .super-form
        {
            margin: 12px;
        }
        
        .ob_fC table td
        {
            white-space: normal !important;
        }
        
        .command-row .ob_fRwF
        {
            padding-left: 50px !important;
        }
        
        #<%= UpdateProgress1.ClientID %>
    {
        position: absolute;
        z-index: 50; 
        top: 0px; 
        bottom: 0px; 
        left: -5px; 
        right: 5px; 
        width: auto; 
        height: auto;
        background-color: #EEEEEE;
        text-align: center;
        filter: alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6;
    }
        
    .loading-image
    {
        position: absolute;
        font-family: Verdana;
	    font-size: 10px;
	    color:#0C416F;
	    height: 10px;
	    top: 50%;	
	    bottom: 0px;
	    margin-top: -5px;	
	    left: 0px;
	    right: 0px;
	    margin-left: auto;
	    margin-right: auto;
	    text-align: center;
	    width: 100%;
    }
    </style>

<script type="text/javascript" type="text/JavaScript">

    var detailInAddEditMode = null;

    function filterGrid(ddl) {

        dgArticles.addFilterCriteria('AGId', OboutGridFilterCriteria.EqualTo, ddl.value);
        dgArticles.executeFilter();
    }

    function dgArticles_BeforeClientDelete(sender, record) {
        if (confirm("Are you sure to delete this article?") == false) {
            return false;
        }
        return true;
    }

    //Get the foreign key of Master grid
    function onPopulateControls(sender, record) {

        return record;
    }

    //Action when click Add button in Detail Grid 
    function dgArticles_ClientAdd(sender, record) {

        Window1.Open();
        document.getElementById("divBigNotification").style.display = "none";

        detailInAddEditMode = sender;   //Using update, insert DetailsGrid
        var foreignKey = sender.ForeignKeys.AGId.Value;

        document.getElementById('<%= AId.ClientID%>').value = 0;

        var dd = document.getElementById('<%= sAGroup.ClientID %>');

        var dd = document.getElementById('<%= sAGroup.ClientID %>');
        for (var i = 0; i < dd.options.length; i++) {
            if (dd.options[i].value === foreignKey) {
                dd.selectedIndex = i;
                break;
            }
        }

        document.getElementById('<%= AName.ClientID%>').value = "";
        document.getElementById('<%= AActive.ClientID%>').checked = true;
        document.getElementById('<%= UserName.ClientID %>').value = '<%= Session["username"] %>';
        SetContents("");


        return false;
    }

    //Action when click Edit change button in Detail Grid
    function dgArticles_ClientEdit(sender, record) {
        Window1.Open();

        document.getElementById("divBigNotification").style.display = "none";

        detailInAddEditMode = sender;   //Using update, insert DetailsGrid

        var dd = document.getElementById('<%= sAGroup.ClientID %>');
        for (var i = 0; i < dd.options.length; i++) {
            if (dd.options[i].value === record.AGId) {
                dd.selectedIndex = i;
                break;
            }
        }

        document.getElementById('<%= AId.ClientID%>').value = record.AId;
        document.getElementById('<%= AName.ClientID%>').value = record.AName;
        document.getElementById('<%= UserName.ClientID %>').value = record.UserName;
        document.getElementById('<%= AActive.ClientID%>').checked = record.AActive.toLowerCase() == 'true' ? true : false;
        SetContents(record.AContent);
        return false;
    }

    function saveChanges() {

        var AId = document.getElementById('<%= AId.ClientID%>').value;

        var data = new Object();
        var e = document.getElementById('<%= sAGroup.ClientID%>');

        data.AGId = e.options[e.selectedIndex].value;

        data.AName = document.getElementById('<%= AName.ClientID%>').value;
        data.UserName = document.getElementById('<%= UserName.ClientID %>').value;
        data.AActive = document.getElementById('<%= AActive.ClientID%>').value;
        data.AContent = GetContents();

        if (AId == 0) {
            var isValid = AddArticleValid(data.AGId, data.AName);
            if (isValid == 1) {
                Window1.Close();
                detailInAddEditMode.executeInsert(data);
                getMessageSuccess("Successfully!");
            }
            else if (isValid == 2) {
                getMessageAttention1("Article Group is null or empty");
            }
            else if (isValid == 3) {
                getMessageAttention1("Article Group is not valid");
            }
            else if (isValid == 10) {
                getMessageAttention1("Article title is null or empty");
            }
            else if (isValid == 11) {
                getMessageAttention1("Article title is less than 6 characters");
            }
            else if (isValid == 12) {
                getMessageAttention1("Article title is greater than 100 characters");
            }

        }
        else {
            data.AId = AId;
            var isValid = EditArticleValid(data.AId, data.AGId, data.AName);

            if (isValid == 1) {
                Window1.Close();
                detailInAddEditMode.executeUpdate(data);
            }
            else if (isValid == 2) {
                getMessageAttention1("Article Group is null or empty");
            }
            else if (isValid == 3) {
                getMessageAttention1("Article Group is not valid");
            }
            else if (isValid == 4) {
                getMessageAttention1("Article Group is null or empty");
            }
            else if (isValid == 5) {
                getMessageAttention1("Article Group is not valid");
            }
            else if (isValid == 10) {
                getMessageAttention1("Article title is null or empty");
            }
            else if (isValid == 11) {
                getMessageAttention1("Article title is less than 6 characters");
            }
            else if (isValid == 12) {
                getMessageAttention1("Article title is greater than 100");
            }
        }
        setInterval(function () { hidediv('divBigNotification'); }, 4000);

    }

    function cancelChanges() {
        Window1.Close();
    }


    function hidediv(arg) {
        document.getElementById(arg).style.display = 'none';
    }

</script>

</asp:Content>
